import React from 'react';
import {Flex, WhiteSpace, Icon, Modal} from 'antd-mobile';
import {Layout, Panel, TimeLine, Line} from '../../components';
import './index.less';


class Bill extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      planShow: false
    }
  }

  /* 视图渲染*/
  render() {
    return (
      <Layout>
        <div className={'page-bill'}>
          <div className={'b-box'}>
            <div className={'b-header'}>
              <div className={'b-h-info'}>
                <p>使用中的本金(元)</p>
                <h4>9,166.69</h4>
                <div>联系客服还款</div>
              </div>
              <Flex>
                <Line
                  icon={true}
                  className={'b-h-plan'}
                  title={'还款计划'}
                  extra={'9天后将自动还款'}
                  onClick={() => {
                    console.log("1")
                  }}
                />
              </Flex>
            </div>
            <WhiteSpace size={'lg'}/>
            <div className={'b-list'}>
              <Line
                className={'b-l-1'}
                title={'本期未还'}
                extra={"123412"}
                onClick={() => {
                  console.log("1")
                }}
              />
              <Line
                className={'b-l-1'}
                title={'全部待还'}
                extra={"123412"}
                onClick={() => {
                  console.log("1")
                }}
              />
            </div>
            <WhiteSpace size={'lg'}/>
            {/*时间轴*/}
            <div className={'b-plan'}>
              <TimeLine/>
            </div>
            <WhiteSpace size={'lg'}/>
          </div>

          <div className={'b-null'}>
            <img src={require('./imgs/b-null.png')} />
            <WhiteSpace size={'sm'}/>
            <p>暂无借款账单</p>
          </div>
        </div>
      </Layout>
    );
  }
}

Bill.propTypes = {};

export default Bill;
